<template>
  <cs-card>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="角色编码" width="280"> </el-table-column>
      <el-table-column prop="num" label="角色名称" width="100"> </el-table-column>
      <el-table-column prop="color" label="权限字符" width="220"> </el-table-column>
      <el-table-column prop="phoneNum" label="显示顺序" width="200"> </el-table-column>
      <el-table-column prop="validityTime" label="角色状态" width="220">
        <el-switch v-model="switchStatus" active-color="#006EFF" inactive-color="#B4B4B4">
        </el-switch>
      </el-table-column>
      <el-table-column prop="type" label="创建时间" width="200"> </el-table-column>
      <el-table-column label="操作">
        <el-link type="primary" @click="alterRoleDialogVisible">编辑</el-link>
        <el-link type="primary">删除</el-link>
        <el-link type="primary" @click="distributionDialogVisible">数据权限</el-link>
        <el-link type="primary" @click="distributionUserDialogVisible">分配用户</el-link>
      </el-table-column>
    </el-table>
    <div id="pagination_section">
      <span class="currentSelect">{{ `已选${currentSelect}项，共${totalCount}项` }}</span>
      <div class="pagination_right">
        <span>{{ `${pageSize}条/页` }}</span>
        <cs-pagination :currentPage="currentPage" :totalPage="totalPage" />
      </div>
    </div>
  </cs-card>
</template>

<script>
import csCard from '@/components/cs-card/cs-card.vue'
import csPagination from '@/components/cs-pagination/cs-pagination.vue'

export default {
  components: {
    csCard,
    csPagination
  },
  data() {
    return {
      // 当前页码
      currentPage: 1,
      // 一页的条数
      pageSize: 10,
      // 总共多少条数据
      totalCount: 0,
      // 总共多少页
      totalPage: 0,
      currentSelect: 0,
      selectId: [],
      tableData: [
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        },
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        },
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        },
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        },
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        },
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        }
      ],
      switchStatus: true
    }
  },
  methods: {
    alterRoleDialogVisible() {
      this.$bus.$emit('alterRoleDialogVisible')
    },
    distributionDialogVisible() {
      this.$bus.$emit('distributionDialogVisible')
    },
    distributionUserDialogVisible() {
      this.$bus.$emit('distributionUserDialogVisible')
    },
    // 表格选择项变化时触发事件
    selectionChange(selection) {
      this.selectId = []
      // 获取当前选择多少项
      this.currentSelect = selection.length
      this.$bus.$emit('siteSelectNum', this.currentSelect)
      selection.forEach((item) => {
        this.selectId.push(item.id)
      })
      console.log(this.selectId)
    }
  }
}
</script>

<style scoped>
/* 表格样式start */
.el-form-item >>> .el-form-item__label {
  color: #888888;
}

.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.el-textarea >>> .el-textarea__inner {
  border-radius: 0;
}

.form-select {
  width: 100%;
}

.el-link {
  display: inline-block;
  margin-right: 16px;
}

/* 表格选择框样式start */
.el-table >>> .el-checkbox__inner {
  width: 20px;
  height: 20px;
}

.el-table >>> .el-checkbox__inner::after {
  top: 3px;
  left: 6px;
}

.el-table >>> .el-checkbox__inner::before {
  top: 8px;
}
/* 表格选择框样式end */

/* 去掉switch外层的div溢出隐藏 */
.el-table >>> .cell {
  overflow: visible;
}

/* 设置switch的宽高边框 */
.el-switch >>> .el-switch__core {
  width: 28px !important;
  height: 14px;
  border: 2px solid #dddddd !important;
}

/* 设置switch圆形按钮的宽高边框位置 */
.el-switch >>> .el-switch__core:after {
  top: -4px;
  width: 14px;
  height: 14px;
  border: 2px solid #dddddd;
}

/* 设置switch圆形按钮的激活位置 */
.el-switch.is-checked >>> .el-switch__core::after {
  left: 106%;
}

/* 设置switch圆形按钮的关闭位置 */
.el-switch >>> .el-switch__core:after {
  left: -2px;
}

/* 表格样式end */
</style>
